<template>
  <div v-show="isShow" class="toast">
    <div class="left"></div>
    <div class="right">
      <div class="box">{{msg}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Toast',
};
</script>

<style lang="postcss" scoped>
.toast {
  position: fixed;
  display: flex;
  z-index: 30;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: transparent;

  & .left {
    width: 12%;
  }

  & .right {
    position: relative;
    width: 88%;

    & .box {
      position: absolute;
      width: 5rem;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      line-height: 1.5;
      padding: .4rem .6rem;
      text-align: center;
      background-color: rgba(0, 0, 0, .7);
      color: #fff;
      border-radius: 3px;
      font-size: .4rem;
    }
  }
}
</style>
